<!DOCTYPE html>
<html lang="en">
<!--<style type="text/css">-->
<!--    #div1{-->
<!--        width:198px;-->
<!--        height:66px;-->
<!--        padding:10px;-->
<!--        border:1px solid-->
<!--    }-->
<!--    #drag1{-->
<!--        width:40px;-->
<!--        height:40px;-->
<!--        background:red-->
<!--    }-->
<!--</style>-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    #div1{
        width:198px;
        height:66px;
        padding:10px;
        border:1px solid
    }
    #drag1{
        width:40px;
        height:40px;
        background:red
    }

    </style>
    <script type="text/javascript">
    //拖动开始，复制拖动的元素
    function drag(ev){
        ev.dataTransfer.setData("Text", ev.target.id);
    }
    //当拖拽到释放区域内后
    function drop(ev){
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
    function allowDrop(ev){
        ev.preventDefault();
    }

    </script>
</head>
<body>
<p>请拖拽红块到矩形中</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br/>
<div id="drag1" draggable="true" ondragstart="drag(event)"></div>

</body>
</html>